<template>
    <label class="happy-checkbox" :class="{
            'is-checked': isChecked
    }">
        <span class="happy-checkbox_input">
          <span class="happy-checkbox_inner"></span>
          <input type="checkbox"
                 class="happy-checkbox_original"
                 :name="name"
                 :value="label"
                 v-model="model"
          >
        </span>
            <span class="happy-checkbox_label">
          <slot></slot>
          <template v-if="!$slots.default">
            {{label}}
          </template>
        </span>
    </label>
</template>

<script>
    export default {
        name: "happyCheckbox",
        props:{
            label:{
                type: [String, Number, Boolean],
                default: ''
            },
            name:{
                type: [String, Number],
                default: ''
            },
            value: Boolean
        },
        inject:{
          groupData:{
              default: ''
          }
        },
        computed:{
            model:{
                get() {
                    return this.groupData ? this.groupData.value : this.value;
                },
                set(value){
                    this.groupData ? this.groupData.$emit('input', value) : this.$emit('input', value);
                }
            },
            isChecked(){
                return this.groupData ? this.model.includes(this.label) : this.model;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .happy-checkbox{
        color: #606266;
        font-weight: 500;
        font-size: 14px;
        position: relative;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        user-select: none;
        margin-right: 30px;
        .happy-checkbox_input{
            white-space: nowrap;
            cursor: pointer;
            outline: none;
            display: inline-block;
            line-height: 1;
            position: relative;
            vertical-align: middle;
            .happy-checkbox_inner{
                display: inline-block;
                position: relative;
                border: 1px solid #dcdfe6;
                border-radius: 2px;
                box-sizing: border-box;
                width: 14px;
                height: 14px;
                background-color: #fff;
                z-index: 1;
                transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s,cubic-bezier(.71,-.46,.29,1.46);
                &:after{
                    box-sizing: content-box;
                    content: '';
                    border: 1px solid #ffffff;
                    border-left: 0;
                    border-top: 0;
                    height: 7px;
                    left: 4px;
                    position: absolute;
                    top: 1px;
                    transform: rotate(45deg) scaleY(0);
                    width: 3px;
                    transition: transform .15s ease-in .05s;
                    transform-origin: center;
                }
            }
            .happy-checkbox_original{
                opacity: 0;
                outline: none;
                position: absolute;
                left: 10px;
                margin: 0;
                width: 0;
                height: 0;
                z-index: -1;
            }
        }
        .happy-checkbox_label{
            display: inline-block;
            padding-left: 10px;
            line-height: 19px;
            font-size: 14px;
        }
    }
    // 选中的样式
    .happy-checkbox.is-checked{
        .happy-checkbox_input{
            .happy-checkbox_inner{
                background-color: #409eff;
                border-color: #409eff;
            }
            &:after{
                transform: rotate(45deg) scaleY(1);
            }
        }
        .happy-checkbox_label{
            color: #409eff;
        }
    }
</style>
